<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>
<html class="zh-cn zh cn" lang="zh-cn">
<head>
	<%@ include file="../head.jsp"%>
    <link rel="stylesheet" type="text/css" media="screen" href="/resource/style/common/ui.jqgrid.css" />
	<link rel="stylesheet" type="text/css" href="/resource/css/validationEngine.jquery.css" />
    <link rel="stylesheet" type="text/css" href="/resource/css/template.css" />
    <script src="/resource/style/common/lib/jqgrid/i18n/grid.locale-cn.js" type="text/javascript"></script>
    <script src="/resource/style/common/lib/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="/resource/js/actjson.js"></script>
	<script src="/resource/js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
	<script src="/resource/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css"> 
<!--
.edittrLefttd{
	vertical-align: top;
	float: right;
	padding: 5px 10px 5px 5px;
}
.edittrRighttd{
	width: 70%;
	padding: 5px 0px 5px 3px;
}
.home #family-iphone .product .new-icon {
    top: 22px;
    left: 2px;
}
-->
</style>
</head>
<body class="vday home">
    <div id="page">
        <%@ include file="../global_navi.jsp"%>
        <%@ include file="../aos_header.jsp"%><!-- 如果需要查询，要自定义aos_header -->
        <%@ include file="../guide.jsp"%><!-- 动态向导栏，需要后台 -->

        <div id="primary">
            <div id="primary_main" role="main">
                <div class="box product-shelf">
                    <div class="box-content clearfix">
                        <form id="addressForm" method="POST" action="add">
							<TABLE BORDER=0 WIDTH=401 CELLPADDING=0 CELLSPACING=0>
								<TR VALIGN=TOP>
									<TD WIDTH=401 COLSPAN=3>
										<img src="/resource/style/xpdd/act/image/step_title.gif"
											height="35" width="463" alt="步骤" />
									</TD>
								</TR>
								<TR VALIGN=TOP>
									<TD WIDTH=80></TD>
									<TD WIDTH=450 VALIGN=top>
										<img src="/resource/style/xpdd/act/image/step_3.gif"
											height="60" width="440" alt="维护宝贝组" />
									</TD>
									<TD WIDTH=145 VALIGN=BOTTOM ALIGN=CENTER></TD>
								</TR>
							</TABLE>
							<br />
                            <table style="width: 100%;border: 0px;" >
                            	<tr>
                            		<td class="edittrLefttd">
                            			<font face="'Lucida Grande', Verdana, Helvetica, sans-serif" size="1">分组名称</font>
                            		</td>
                            		<td class="edittrRighttd">
                            			<input type="text" size="30" value="" id="activityName" class="validate[required,funcCall[checkSp]]" maxlength="20"/>
                            		</td>
                            	</tr>
                            	<tr>
                            		<td class="edittrLefttd">
										<font face="'Lucida Grande', Verdana, Helvetica, sans-serif" size="1">
										<span class=L10>宝贝加入时间</span></font>
                            		</td>
                            		<td class="edittrRighttd">
                            			<INPUT type=text size="30" value="${nowTime}" id="beginTime" readonly="readonly"/>
                            		</td>
                            	</tr>
                            	<tr>
                            		<td class="edittrLefttd">
                            			<font face="'Lucida Grande', Verdana, Helvetica, sans-serif" size="1">
										<span class=L10>宝贝退出时间</span></font>
                            		</td>
                            		<td class="edittrRighttd">
                            			<INPUT type=text size="30" class="firstNameField validate[required,custom[date],future[now]]" value="" id="endTime" />
                            		</td>
                            	</tr>
                            	<tr>
                            		<td class="edittrLefttd">
										<font face="'Lucida Grande', Verdana, Helvetica, sans-serif" size="1">
										<span class=L10>策略模版</span></font>
                            		</td>
                            		<td class="edittrRighttd">
										<select id="modelId">
										<c:forEach items="${actSettingList }" var="actSetting" >
											<option value="${actSetting.id }">${actSetting.name }</option>
										</c:forEach>
										</select> &nbsp;&nbsp;
										<a href="/setting">维护模版</a>
                            		</td>
                            	</tr>
                            	<tr>
                            		<td class="edittrLefttd">
                            			<font face="'Lucida Grande', Verdana, Helvetica, sans-serif" size="1">人数上限</font>
                            		</td>
                            		<td class="edittrRighttd">
										<input type="text" maxlength="9" size="30" value="" id="activityNum" class="validate[required,custom[integer],min[0]]"/>
                            		</td>
                            	</tr>
                            	<!-- 
                            	<tr>
                            		<td class="edittrLefttd">
                            			<font face="'Lucida Grande', Verdana, Helvetica, sans-serif" size="1">
                            			<span class=L10>活动隐私（屏蔽）</span></font>
                            		</td>
                            		<td class="edittrRighttd" valign="top" nowrap="nowrap">
                            			<select id="actScope">
                            				<option value="0">所有人</option>
                            				<option value="1">注册淘宝的用户</option>
                            				<option value="2">购买商品的用户</option>
                            			</select>
                            		</td>
                            	</tr>
                            	<!-- 
                            	<tr>
                            		<td class="edittrLefttd">
                            			<font face="'Lucida Grande', Verdana, Helvetica, sans-serif" size="1">
                            			<span class=L10>公告（屏蔽）</span></font>
                            		</td>
                            		<td class="edittrRighttd">
                            			<textarea style="width: 200px;" id="notice"></textarea>
                            		</td>
                            	</tr>
                            	<tr>
                            		<td class="edittrLefttd">
                            			<font face="'Lucida Grande', Verdana, Helvetica, sans-serif" size="1">
                            			<span class=L10>活动选项（屏蔽，默认全部开启）</span></font>
                            		</td>
                            		<td class="edittrRighttd">
                            			<div style="text-align: left;">
                                            <input type="checkbox" name="optAct" id="isHelp" onClick="" /> 是否允许帮忙
                                            <br />
                                            <input type="checkbox" name="optAct" id="isEave" onClick="" /> 是否允许偷听
                                            <br />
                                            <input type="checkbox" name="optAct" id="isFavorites" onClick="" />是否允许收藏 
                                            <br />
                                            <input type="checkbox" name="optAct" id="isShare" onClick="" />是否允许分享
                                        </div>
                            		</td>
                            	</tr>
                            	-->
                            </table>
                            <div>
                            	<input style="margin-left: 50%;" type="reset" value="重置"/>
                                <input style="margin-left: 3px;" type="button" value="提交 " id="submitButton" />
                            </div>
                        </form>
                    </div>
                    
                    <div class="top-corners"></div>
                    <div class="bottom-corners"></div>
                </div>
                <ul class="home-page-banners clearfix"></ul>
                <div class="box featured-accessories">
                    <div class="title-bar">
                        <h2>参与宝贝</h2>
                        <h4>&nbsp;&nbsp;
							商品数量: <span id="totalNum">0</span>件 &nbsp;&nbsp;
							参与本组商品数量：<span id="outNum">0</span>件 &nbsp;&nbsp;
							参与其他组商品数量：<span id="inNum">0</span>件
						</h4>
                    </div>
                    <div class="box-content clearfix">
                        <table id="list9"></table>
                        <div id="pager9"></div>
                    </div>
                    <div class="bottom-corners"></div>
                </div>
            </div>
            <div id="secondary" class="rail"><!-- 右侧功能菜单 -->
                <div role="navigation" aria-label="New Items" class="box navigation-list new-to-store">
                    <div class="title-bar">
                        <h2>操作</h2>
                    </div>
                    <div class="box-content clearfix">
                        <div class="list_content">
                            <ul>
                                <li><a href="/activity/list" onclick="showLoading();">返回活动首页</a></li>
                                <li><a href="javascript:history.back();">返回上一页</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="bottom-corners"></div>
                </div>

                <div class="box navigation-list top-sellers"></div>
                <div class="module footerblock"></div>
            </div>
        </div>
        <%@ include file="../left_navi.jsp"%><!-- 左侧导航 begin -->
        <span class="shrinkwrapfix"></span>
        <%@ include file="../footer.jsp"%><!-- 左侧导航 end -->
    </div>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
	//设置当前路径
	jQuery("#breadcrumb").append('<li><span>:&nbsp;&nbsp;宝贝创建</span></li>');
	
	var tmpIds = new Array();
	//查询商品信息
	jQuery("#list9").jqGrid({
		url : '/activity/query?type=create',
		mtype : "get",
		datatype : "json",
		colNames : [ '编号', '图片', '宝贝名称', '价格', '活动状态' ],
		colModel : [ 
		    {name : 'code',index : 'code',width : 55}, 
			{name : 'picUrl',index : 'picUrl',width : 20,align : "center"}, 
			{name : 'name',index : 'name',width : 150}, 
			{name : 'price',index : 'price',width : 80,align : "right"}, 
			{name : 'status',index : 'status',width : 50,align : "right"} ],
		width : 625,
		rowNum : 10,
		rowList : [10, 20, 30 ],
		pager : '#pager9',
		sortname : 'id',
		recordpos : 'left',
		viewrecords : true,
		sortorder : "desc",
		multiselect : true,
		caption : "已上架宝贝列表",
		jsonReader : {
			root : "rows",
			page : "page",
			total : "total",
			records : "records",
			repeatitems : false,
			id : "0"
		},
		loadComplete: function(obj)
		{
			jQuery("#totalNum").html(obj.totalNum);
			jQuery("#inNum").html(obj.otherNum);
			var total = jQuery('#list9').jqGrid('getGridParam','records');
			for (var i = 0; i < tmpIds.length; i++)
			{
				jQuery("#list9").jqGrid('setSelection', tmpIds[i]);
			}
			jQuery("#outNum").html(tmpIds.length);
		},
		onPaging: function(pgButton)
		{
			var ids = jQuery("#list9").jqGrid('getGridParam','selarrrow');
			tmpIds = tmpIds.concat(ids);
			tmpIds = undulpicate(tmpIds);
		},
		onSelectAll : function(aRowids, status)
		{
			if (status)
			{
				//全选
				tmpIds = aRowids;
				for (var i = 0; i < tmpIds.length; i++)
				{
					jQuery("#list9").setCell(tmpIds[i], 'status', '已使用');
				}
			}
			if (!status)
			{
				for (var i = 0; i < tmpIds.length; i++)
				{
					jQuery("#list9").setCell(tmpIds[i], 'status', '未使用');
				}
				//全不选
				tmpIds = new Array();
			}
			jQuery("#outNum").html(tmpIds.length);
		},
		onSelectRow: function(id, status)
		{
			//选择行时触发此事件。rowid：当前行id；status：选择状态，当multiselect 为true时此参数才可用
			var outNum = parseInt(jQuery("#outNum").html());
			if (status && id && status == true)
			{
				outNum += 1;
				jQuery("#list9").setCell(id, 'status', '已使用');
				tmpIds.push(id);
                tmpIds = undulpicate(tmpIds);
			}
			else
			{
				outNum -= 1;
				jQuery("#list9").setCell(id, 'status', '未使用');
				var ti = -1;
                for (var i = 0; i < tmpIds.length; i++)
                {
                    if (tmpIds[i] == id)
                    {
                        ti = i;
                    }
                }
                if (ti != -1)
                {
                    tmpIds.splice(ti, 1);
                }
			}
			jQuery("#outNum").html(outNum);
		}
	});
	jQuery("#list9").jqGrid('navGrid', '#pager9', {
		add : false,
		del : false,
		edit : false,
		search : false,
		position : 'right'
	});

	
	//弹出时间框
	//jQuery("#beginTime").datepicker({dateFormat: 'yy-mm-dd'});
	jQuery("#endTime").datepicker({dateFormat: 'yy-mm-dd'});
	//jQuery("#beginTime").attr("CONTENTEDITABLE", "false");
	jQuery("#endTime").attr("CONTENTEDITABLE", "false");
	
    jQuery("#submitButton").click(function(){
    	if (!jQuery("#addressForm").validationEngine('validate'))
   		{
    		return false;
   		}
        var beginDa = jQuery("#beginTime").val().split("-");
        var endDa = jQuery("#endTime").val().split("-");
        var beginT = new Date(new Date(beginDa[0], (beginDa[1] - 1) ,beginDa[2]));
        var endT = new Date(new Date(endDa[0], (endDa[1] - 1) ,endDa[2]));
        if (beginT > endT)
        {
            jQuery( "#dialog-message2" ).dialog("open");
            return false;
        }

        //var ids = jQuery("#list9").jqGrid('getGridParam','selarrrow');
        if (tmpIds.length == 0)
       	{
        	jQuery("#dialog-message1").dialog("open");
        	return false;
       	}
        
        //试用版只能使用一个
        var sellerRight = ${seller.status};
        
        if(parseInt(sellerRight) < 1 && tmpIds.length > 1){
        	jQuery("#dialog-message3").dialog("open");
        	return false;
        }
        
        //一次最多只能添加10个宝贝
        if(tmpIds.length > 10){
        	jQuery("#dialog-message1").dialog("open");
        	return false;
        }

        //活动名称activityName
        var activityName = jQuery("#activityName").val();
        //beginTime
        var beginTime = jQuery("#beginTime").val();
        //endTime
        var endTime = jQuery("#endTime").val();
        //参数模版 modelId
        var modelId = jQuery("#modelId").val();
        //活动人数activityNum
        var activityNum =jQuery("#activityNum").val();
        
        var param = {
        	    "activityName" : activityName,
        	    "beginTime" : beginTime,
        	    "endTime" : endTime,
        	    "modelId" : modelId,
        	    "activityNum" : activityNum,
        	    "actScope" : 0,//actScope,
        	    "notice" : "",
        	    "isHelp" : true,
        	    "isEave" : true,
        	    "isFavorites" : true,
        	    "isShare" : true,
        	    "itemData" : jQuery.toJSON(tmpIds)
        };
        
        //ajax
        jQuery.ajax({
            url : "/activity/add",
            context: document.body,
            type : "POST",
            datatype : "json",
            data : param,
            beforeSend: function(XMLHttpRequest){
            	//jQuery("#submitButton").attr("disabled", "true");
                jQuery("#nyroDiv a").nmCall();
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                jQuery("#submitButton").attr("disabled", "false");
            },  
            success:function(data, textStatus){  
                //$('body').append("<div>"+data+"</div>").css("color","red");
                var tmpData = eval( "(" + data + ")");
                if (tmpData['code'] == 201)
               	{
                	window.location.href="/activity/list";
               	}
                else if (tmpData['code'] == -201)
               	{
                	jQuery("#dialog-message4").dialog("open");
               	}
                else
               	{
	                jQuery("#dialog-message").dialog("open");
               	}
            },
            complete: function(XMLHttpRequest, textStatus){
                closeModal();
           	}
        });
    });

    
	jQuery( "#dialog:ui-dialog" ).dialog("destroy");
	jQuery( "#dialog-message" ).dialog({
		autoOpen : false,
		modal: true,
		buttons: {
			Ok: function() {
				closeModal();
				jQuery(this).dialog("close");
			}
		}
	});
	jQuery("#dialog-message1").dialog({
		autoOpen : false,
		modal: true,
		buttons:{
			ok:function(){
				jQuery(this).dialog("close");
			}
		}
	});
	jQuery("#dialog-message2").dialog({
        autoOpen : false,
        modal: true,
        buttons:{
            ok:function(){
            	jQuery(this).dialog("close");
            }
        }
    });
	
	jQuery("#dialog-message3").dialog({
        autoOpen : false,
        modal: true,
        buttons:{
            ok:function(){
            	jQuery(this).dialog("close");
            }
        }
    });

	jQuery("#dialog-message4").dialog({
        autoOpen : false,
        modal: true,
        buttons:{
            ok:function(){
            	jQuery(this).dialog("close");
            }
        }
    });
	
	jQuery("#addressForm").validationEngine({
		validationEventTrigger: "submit",
		promptPosition: "topRight"
	});
});
function showLoading()
{
	jQuery("#nyroDiv a").nmCall();
}
function closeModal()
{
    if (jQuery.nmTop() != undefined)
    {
        jQuery.nmTop().close();
    }
}
function checkSp(field, rules, i, options)
{
    var invalidChar=/^[\|"'<>&\^\?\*~\{\}\[\]\+\-\$()#!！@？“‘%（）……￥`·_\-—=【】\\;；’”，《》,.。、:：\/]+$/;
    if (invalidChar.test(field.val())) 
    {
        return "* 不能输入特殊字符,只能包括字母、数字或者汉字";
    }
}
//]]>
</script>
<div id="dialog-message" title="错误提示">
	<p>参数异常或者查询淘宝平台失败!</p>
</div>
<div id="dialog-message1" title="商品异常">
    <p>没有添加商品,请先添加商品!</p>
</div>
<div id="dialog-message2" title="时间异常">
    <p>开始时间不能大于结束时间!</p>
</div>
<div id="dialog-message3" title="数量异常">
    <p>试用版只能添加一个宝贝!</p>
</div>
<div id="dialog-message4" title="宝贝组异常">
    <p>只能创建一个宝贝组!</p>
</div>
</body>
</html>